<template>
    <div class="box">
      <h2>个人信息</h2>
      <van-form @submit="onSubmit">
        <van-cell-group inset>
            <van-field
            v-model="username"
            name="姓名"
            label="*姓名"
            placeholder="请填写姓名"
            :rules="[{ required: true, message: '请填写姓名' }]"
            />
            <van-field
            v-model="number"
            type="number"
            name="userCode"
            label="*编号"
            placeholder="请填写编号"
            :rules="[{ required: true, message: '请填写编号' }]"
            />           
            <van-field name="radio" label="*性别">
                <template #input>
                    <van-radio-group v-model="checked" direction="horizontal">
                    <van-radio name="男">男</van-radio>
                    <van-radio name="女">女</van-radio>
                    </van-radio-group>
                </template>
            </van-field>
            <van-field
            v-model="number"
            type="number"
            name="userPhone"
            label="*手机号"
            placeholder="请填写手机号"
            :rules="[{ required: true, message: '请填写手机号' }]"
            /> 
            <van-field
            v-model="userSchool"
            name="userSchool"
            label="*学校"
            placeholder="请填写学校"
            :rules="[{ required: true, message: '请填写学校' }]"
            />
            <van-field
            v-model="userMajor"
            name="userMajor"
            label="*专业"
            placeholder="请填写专业"
            :rules="[{ required: true, message: '请填写专业' }]"
            />
            <van-field name="checkbox" label="*人员属性">
                <template #input>
                    <van-tag round type="primary">群众</van-tag>
                    <van-tag round type="primary">团员</van-tag>
                    <van-tag round type="primary">党员</van-tag>
                </template>
            </van-field>
        </van-cell-group>
            
        <div style="margin: 16px;">
            <van-button round block type="primary" native-type="submit">
            提交
            </van-button>
        </div>
        </van-form>
    </div>
    <div @click="goBack">返回首页</div>
</template>
<script setup>
import { useRouter } from 'vue-router';

const router = useRouter()

function goBack(){
    router.push('/')
}
</script>

<style scoped>
body{
    margin: 0;
    padding: 0;
}
.box{
    width: 87vw;
    height: 440px;
    /* border: 1px solid; */
    border-radius: 10px;
    margin: 24px;
    background-color: #fff;

    display: flex;
    justify-content: center;
    /* align-items: center; */
    flex-direction: column;
}
ul{
    list-style-type: none;
    /* margin: 20px; */
}
li{
    margin: 20px;

    display: flex;
    justify-content: space-around;
}
.label{
    width: 75px;
}
.list{
    width: 230px;
}
h2{
    margin: 20px;
}
</style>